<template>
  <div style="width: 1400px; align-self: center; justify-content: center;">
	  <div style="height: 40px;">
	  	
	  </div>
  	<el-carousel :interval="5000" type="card" height="400px" indicator-position="outside">
  	    <el-carousel-item v-for="item0 in carouselData" :key="item0.id" style="box-shadow: 3px 3px 15px 2px #acacac;" @click="jumpto(item0.url)">
  	        <el-image :src="item0.img" alt="" fit="fill" style="height: 100%;"/>
  	    </el-carousel-item>
  	</el-carousel>
	<div style="display: flex;flex-direction:row;">
		<div style="flex: 1;"></div>
		<div style="flex: 13;display: flex;flex-direction: column;">
			<div style="display: flex;flex-direction: row;">
				<div style="flex:1"><TLFS/></div>
				<div style="flex:8; padding-left: 30px;"><el-col :span="8">
				  <el-countdown
				    title="时 :分 :秒 "
				    format="HH:mm:ss"
				    :value="value1"
					@on-end="handleCountdownEnd"
				  />
				</el-col></div>
				
			</div>
			<div style="display: flex;flex-direction: row;">
							
				<el-card v-for="item in tlData"  @click="goods(item)">
				    <img
				    :src="getPath(item.imagePathList[0])"
				    style="width: 100%;
				    max-height:201px ;
				    width: 201px;"
				    />
					<template #footer> 
					    
						<span class="price-icon">￥</span>
						<span class="price">{{item.price}}</span>
						<br/>
						<span>{{item.name}}</span>
					</template>
				</el-card>
			</div>
		</div>
	</div>
	<div style="height: 60px;"></div>
		<div style="display: flex;flex-direction:row;">
			<div style="flex: 1;"></div>
			<div style="flex: 13;display: flex;flex-direction: column;">
				<div><HS/></div>
				<div style="display: flex;flex-direction: row;"  >
								
					<el-card v-for="item in hsData" @click="goods(item)">
					    <img
					    :src="getPath(item.imagePathList[0])"
					    style="width: 100%;
					    max-height:201px ;
					    width: 201px;"
					    />
						<template #footer> 
						    
							<span class="price-icon">￥</span>
							<span class="price">{{item.price}}</span>
							<br/>
							<span>{{item.name}}</span>
						</template>
					</el-card>
						
				</div>
			</div>
			
		</div>
	<router-view></router-view>
		
	</div>

	
	
	
	
</template>

<script setup>
import {ref} from "vue"
import TLFS from '@/components/icons/timeLimitedFlashSale'
import HS from '@/components/icons/hotSales'
import router from '@/router';
import { useRoute } from 'vue-router';
import {get,post} from '@/plugins/axios'
import { getPath } from '@/util';
const now = new Date();
      // 获取当前日期，然后加1天
const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
console.dir(tomorrow)
const value1 = tomorrow
const route = useRoute();
const carouselData = ref([])
const tlData = ref([])
const hsData = ref([])
getTableData()
getTableDataTL()
getTableDataHS()
console.dir(carouselData)
function goods(item){
	router.push({
		path:'/goodsInfo',
		query:{goodsId:item.id}
	})
}
function jumpto(url){
	if (url.startsWith('http://') || url.startsWith('https://')) {
    	window.location.href = url;
  	} else {
		console.log('else进去了'+url)
    	router.push(url);
  	}
}

function getTableData() {
	get("/banner/list", {},content =>{
		console.dir(content)
		carouselData.value=content
		console.dir(carouselData)
	})
}
function getTableDataTL() {
	get("/goods/getMarketingGoods", {marketingId:1},content =>{
		console.dir(content)
		tlData.value=content
		console.dir(tlData)
	})
}
function getTableDataHS() {
	get("/goods/getHotSalesGoods", {},content =>{
		console.dir(content)
		for(const index in content )
		{
			if(index<5){
				hsData.value.push(content[index])	
			}
				// hsData.value.push(content[index])	
		}
		console.dir(hsData)
	})
	
}
function handleCountdownEnd() {
	 //
    }
</script>

<style scoped lang="scss">
.el-carousel__item:nth-child(2n) {
}

.el-carousel__item:nth-child(2n + 1) {
}
:deep(.el-carousel__indicator--horizontal .el-carousel__button){
	margin-top: 20px;
    width: 50px;
    height: 8px;
    border-radius: 31px;
    background: #AAAAAA80;
  }
// 指示灯选中的样式
  :deep(.el-carousel__indicator--horizontal.is-active .el-carousel__button){
	  margin-top: 20px;
    width: 50px;
    height: 8px;
    border-radius: 31px;
    background: #fff;
  }
  .el-card{
	  width: 250px;
	  max-height: 450px;
	  margin: 10px;
  }
  .price-icon{
  	color: #ff6200;
  	font-size: 16px;
  	font-weight: 700;
  	line-height: 16px;
	 cursor: default;
  }
  .price{
  	color: #ff6200;
  	font-size: 24px;
  	font-weight: 700;
  	line-height: 36px;
  	font-family: AlibabaSans102v1TaoBao-Bold,Alibaba-Sans102,PingFangSC-Regular;
	 cursor: default;
  }
  span{
	   cursor: default;
  }
 :deep(.el-statistic__number) {
    color: red; /* 修改标题颜色 */
	font-weight: 600;
	font-size: 24px;
	
  }
  
:deep(.el-statistic__head){
    color: #aa55ff90; /* 修改数字颜色 */
	font-weight: 600;
	font-size: 24px;
	
  }
  
</style>